<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Cards</h2>
                  <p>Our cards provide a flexible and extensible content container with multiple variants and options.</p>
                  <a href="http://getbootstrap.com/docs/4.0/components/card" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="example">Example</h3>
                <div class="code-example">
                  <div class="card" style="width: 18rem;">
                    <img class="img-fluid" src="holder.js/600x400?auto=yes" alt="Card image cap" />
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">Some quick example text....</p>
                      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"holder.js/600x400?auto=yes"</span> <span class="na">alt=</span><span class="s">"Card image cap"</span> <span class="na">class=</span><span class="s">"img-fluid"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h4&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>Some quick example text....<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="metadata">Metadata</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="card">
                        <div class="card-body">
                          <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                          <h6 class="text-muted mb-4">2 hrs ago</h6>
                          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="card">
                        <div class="card-body">
                          <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                          <ul class="list-inline mb-4">
                            <li class="list-inline-item pr-2">
                              <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                            </li>
                            <li class="list-inline-item">
                              <i class="fas fa-eye text-muted mr-1"></i> 750
                            </li>
                          </ul>
                          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading heading-5 strong-600"</span><span class="nt">&gt;</span>Special title treatment<span class="nt">&lt;/h5&gt;</span>
                <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"text-muted mb-4"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/h6&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below as a natural lead-in to additional content.<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading heading-5 strong-600"</span><span class="nt">&gt;</span>Special title treatment<span class="nt">&lt;/h5&gt;</span>
                <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline mb-4"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item pr-2"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart mr-1"</span><span class="nt">&gt;&lt;/i&gt;</span> 50<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-eye text-muted mr-1"</span><span class="nt">&gt;&lt;/i&gt;</span> 750
                    <span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below as a natural lead-in to additional content.<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <div class="code-example">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body">
                          <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                          <h6 class="heading heading-sm strong-400 text-muted mb-4">
                            2 hrs ago
                          </h6>
                          <p class="card-text">With supporting text below...</p>
                          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                        </div>
                        <div class="card-footer">
                          <div class="row align-items-center">
                            <div class="col">
                              <span class="avatar avatar-sm bg-purple">JD</span>
                              <span class="avatar-content">David Wally</span>
                            </div>
                            <div class="col text-right text-xs-right">
                              <ul class="list-inline mb-0">
                                <li class="list-inline-item pr-2">
                                  <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                                </li>
                                <li class="list-inline-item">
                                  <i class="fas fa-eye text-muted mr-1"></i> 750
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body">
                          <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                          <h6 class="heading heading-sm strong-400 text-muted mb-4">
                            2 hrs ago
                          </h6>
                          <p class="card-text">With supporting text below...</p>
                          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                        </div>
                        <div class="card-footer">
                          <div class="row align-items-center">
                            <div class="col">
                              <span class="avatar avatar-sm bg-purple">JD</span>
                              <span class="avatar-content">David Wally</span>
                            </div>
                            <div class="col text-right text-xs-right">
                              <ul class="list-inline mb-0">
                                <li class="list-inline-item pr-2">
                                  2 hrs ago
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading heading-5 strong-600"</span><span class="nt">&gt;</span>Special title treatment<span class="nt">&lt;/h5&gt;</span>
                <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"heading heading-sm strong-400 text-muted mb-4"</span><span class="nt">&gt;</span>
                    2 hrs ago
                <span class="nt">&lt;/h6&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below...<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar-content"</span><span class="nt">&gt;</span>David Wally<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col text-right text-xs-right"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline mb-0"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item pr-2"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart mr-1"</span><span class="nt">&gt;&lt;/i&gt;</span> 50<span class="nt">&lt;/a&gt;</span>
                            <span class="nt">&lt;/li&gt;</span>
                            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-eye text-muted mr-1"</span><span class="nt">&gt;&lt;/i&gt;</span> 750
                            <span class="nt">&lt;/li&gt;</span>
                        <span class="nt">&lt;/ul&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading heading-5 strong-600"</span><span class="nt">&gt;</span>Special title treatment<span class="nt">&lt;/h5&gt;</span>
                <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"heading heading-sm strong-400 text-muted mb-4"</span><span class="nt">&gt;</span>
                    2 hrs ago
                <span class="nt">&lt;/h6&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below...<span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar-content"</span><span class="nt">&gt;</span>David Wally<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col text-right text-xs-right"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline mb-0"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item pr-2"</span><span class="nt">&gt;</span>
                                2 hrs ago
                            <span class="nt">&lt;/li&gt;</span>
                        <span class="nt">&lt;/ul&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="actions">Actions</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="card">
                        <div class="card-header">
                          <div class="row align-items-center">
                            <div class="col-8">
                              <h4 class="heading h5 mb-0">Favorite post</h4>
                            </div>
                            <div class="col-4">
                              <div class="card-icon-actions text-right">
                                <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fas fa-star"></i></a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card-body">
                          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                        <div class="card-footer">
                          <div class="row align-items-center">
                            <div class="col-6">
                              <a href="#" class="btn btn-sm btn-primary">Action button</a>
                            </div>
                            <div class="col-6 text-right">
                              <span class="text-muted">2 hrs ago</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="card">
                        <div class="card-header">
                          <div class="row align-items-center">
                            <div class="col-8">
                              <h4 class="heading h5 mb-0">Love &amp; bookmark post</h4>
                            </div>
                            <div class="col-4">
                              <div class="card-icon-actions text-right">
                                <a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save as favorite"><i class="fas fa-star"></i></a>
                                <a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fas fa-heart"></i></a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card-body">
                          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                        <div class="card-footer">
                          <div class="row align-items-center">
                            <div class="col-6">
                              <a href="#" class="btn btn-sm btn-primary">Action button</a>
                            </div>
                            <div class="col-6 text-right">
                              <span class="text-muted">2 hrs ago</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading h5 mb-0"</span><span class="nt">&gt;</span>Favorite post<span class="nt">&lt;/h4&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-icon-actions text-right"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"favorite active"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-original-title=</span><span class="s">"Save to favorites"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-star"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below as a natural lead-in to additional content.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Action button<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 text-right"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading h5 mb-0"</span><span class="nt">&gt;</span>Love <span class="ni">&amp;amp;</span> bookmark post<span class="nt">&lt;/h4&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-icon-actions text-right"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"favorite"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-original-title=</span><span class="s">"Save as favorite"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-star"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"love active"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-original-title=</span><span class="s">"Love this"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below as a natural lead-in to additional content.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span><span class="nt">&gt;</span>Action button<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 text-right"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="commentable">Commentable</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="card">
                        <div class="card-header py-4">
                          <div class="d-flex align-items-center">
                            <span class="avatar avatar-sm bg-purple">JD</span>
                            <div class="avatar-content">
                              <h5 class="h6 mb-0">Bettie Mavis</h5>
                              <small class="d-block text-muted">New York, US</small>
                            </div>
                          </div>
                        </div>
                        <div class="card-image">
                          <img src="holder.js/600x400?auto=yes" class="img-fluid" />
                        </div>
                        <div class="card-body">
                          <div class="row mb-1">
                            <div class="col">
                              <div class="card-icon-actions card-icon-actions-lg">
                                <a href="#" class="love active"><i class="fas fa-heart"></i></a>
                                <a href="#" class=""><i class="fas fa-comment"></i></a>
                              </div>
                            </div>
                            <div class="col">
                              <div class="card-icon-actions card-icon-actions-lg text-right">
                                <a href="#" class=""><i class="fas fa-bookmark"></i></a>
                              </div>
                            </div>
                          </div>
                          <h6 class="heading h6 mb-3">23 likes</h6>
                          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                        <div class="card-footer">
                          <div class="row ">
                            <div class="col-10">
                              <form class="card-comment-box" role="form">
                                <textarea rows="1" class="form-control textarea-autosize" placeholder="Add a comment..."></textarea>
                              </form>
                            </div>
                            <div class="col-2 text-right">
                              <div class="card-icon-actions card-icon-actions-lg">
                                <a href="#" data-toggle="dropdown" aria-expanded="false">
                                  <i class="fas fa-ellipsis-h"></i>
                                </a>
                                <div class="dropdown-menu py-0 text-center">
                                  <a class="dropdown-item" href="#">Got to post</a>
                                  <a class="dropdown-item" href="#">Repost inappropriate</a>
                                  <a class="dropdown-item" href="#">Embed</a>
                                  <a class="dropdown-item" href="#">Cancel</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header py-4"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-content"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"h6 mb-0"</span><span class="nt">&gt;</span>Bettie Mavis<span class="nt">&lt;/h5&gt;</span>
                        <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>New York, US<span class="nt">&lt;/small&gt;</span>    
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-image"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"holder.js/600x400?auto=yes"</span> <span class="na">class=</span><span class="s">"img-fluid"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-1"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-icon-actions card-icon-actions-lg"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"love active"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-comment"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-icon-actions card-icon-actions-lg text-right"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-bookmark"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"heading h6 mb-3"</span><span class="nt">&gt;</span>23 likes<span class="nt">&lt;/h6&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>With supporting text below as a natural lead-in to additional content.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row "</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-10"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"card-comment-box"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;textarea</span> <span class="na">rows=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-control textarea-autosize"</span> <span class="na">placeholder=</span><span class="s">"Add a comment..."</span><span class="nt">&gt;&lt;/textarea&gt;</span>
                        <span class="nt">&lt;/form&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 text-right"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-icon-actions card-icon-actions-lg"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-ellipsis-h"</span><span class="nt">&gt;&lt;/i&gt;</span>
                            <span class="nt">&lt;/a&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu py-0 text-center"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Got to post<span class="nt">&lt;/a&gt;</span>
                                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Repost inappropriate<span class="nt">&lt;/a&gt;</span>
                                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Embed<span class="nt">&lt;/a&gt;</span>
                                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="list-groups">List groups</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-header py-4">
                          <h4 class="heading h5 font-weight-500 mb-0">Simple list group</h4>
                        </div>
                        <div class="list-group">
                          <ul class="list-group list-group-flush">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-header py-4">
                          <div class="d-flex align-items-center">
                            <h4 class="heading h5 mb-0">Add team members</h4>
                          </div>
                        </div>
                        <div class="list-group">
                          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <div class="list-group-img">
                              <span class="avatar bg-purple">JD</span>
                            </div>
                            <div class="list-group-content">
                              <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                              <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                            </div>
                          </a>
                          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <div class="list-group-img">
                              <span class="avatar bg-pink">TC</span>
                            </div>
                            <div class="list-group-content">
                              <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                              <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                            </div>
                          </a>
                          <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <div class="list-group-img">
                              <span class="avatar bg-blue">WS</span>
                            </div>
                            <div class="list-group-content">
                              <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                              <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                            </div>
                          </a>
                        </div>
                        <div class="card-footer">
                          <form class="card-comment-box" role="form">
                            <div class="row align-items-center">
                              <div class="col-8">
                                <input class="form-control" placeholder="e.g @willsmith" />
                              </div>
                              <div class="col-4 text-right">
                                <button type="button" class="btn btn-sm btn-success btn-icon-only rounded-circle">
                                  <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                                </button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header py-4"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading h5 font-weight-500 mb-0"</span><span class="nt">&gt;</span>Simple list group<span class="nt">&lt;/h4&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header py-4"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading h5 mb-0"</span><span class="nt">&gt;</span>Add team members<span class="nt">&lt;/h4&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Johnyy Depp <span class="nt">&lt;small&gt;</span>10:05 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-pink"</span><span class="nt">&gt;</span>TC<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Tom Cruise <span class="nt">&lt;small&gt;</span>11:30 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-blue"</span><span class="nt">&gt;</span>WS<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Will Smith <span class="nt">&lt;small&gt;</span>15:45 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"card-comment-box"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"e.g @willsmith"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 text-right"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-success btn-icon-only rounded-circle"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-check"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
                            <span class="nt">&lt;/button&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/form&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="card-with-overlay">Card with overlay</h3>
                <div class="code-example">
                  <div class="card text-white border-0 overflow-hidden">
                    <img class="card-img" src="../assets/images/backgrounds/img-1.jpg" alt="Card image" />
                    <span class="mask bg-primary alpha-7"></span>
                    <div class="card-img-overlay d-flex align-items-center">
                      <div class="col-lg-8">
                        <h4 class="heading h3 text-white">Card title</h4>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p class="card-text">Last updated 3 mins ago</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card text-white border-0 overflow-hidden"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"card-img"</span> <span class="na">src=</span><span class="s">"../assets/images/backgrounds/img-1.jpg"</span> <span class="na">alt=</span><span class="s">"Card image"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mask bg-primary alpha-7"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-img-overlay d-flex align-items-center"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-8"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading h3 text-white"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h4&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">&gt;</span>Last updated 3 mins ago<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="colored-cards">Colored cards</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card bg-primary text-white px-4 py-4 border-0 mb-0">
                        <div class="card-body">
                          <h1 class="heading h3 text-white">Theme as framework</h1>
                          <p class="mt-4">
                            We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                          </p>
                          <a href="#" class="btn btn-secondary mt-4">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card bg-secondary px-4 py-4 border-0 mb-0">
                        <div class="card-body">
                          <h1 class="heading h3">Even more components</h1>
                          <p class="mt-4">
                            We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                          </p>
                          <a href="#" class="btn btn-primary mt-4">Learn more</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card bg-primary text-white px-4 py-4 border-0 mb-0"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"heading h3 text-white"</span><span class="nt">&gt;</span>Theme as framework<span class="nt">&lt;/h1&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mt-4"</span><span class="nt">&gt;</span>
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                <span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary mt-4"</span><span class="nt">&gt;</span>Learn more<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card bg-secondary px-4 py-4 border-0 mb-0"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"heading h3"</span><span class="nt">&gt;</span>Even more components<span class="nt">&lt;/h1&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mt-4"</span><span class="nt">&gt;</span>
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                <span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary mt-4"</span><span class="nt">&gt;</span>Learn more<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="pricing-cards">Pricing cards</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card card-pricing text-center px-3 mb-4">
                        <div class="card-header py-4">
                          <h4 class="mb-4">Starter</h4>
                          <h1 class="display-4 text-primary text-center">$19</h1>
                          <span class="h6 text-muted">per month</span>
                        </div>
                        <div class="card-body">
                          <ul class="list-unstyled mb-4">
                            <li>Up to 5 users</li>
                            <li>Basic support on Github</li>
                            <li>Monthly updates</li>
                            <li>Free cancelation</li>
                          </ul>
                          <button type="button" class="btn btn-primary mb-3">Start free trial</button>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card card-pricing popular text-center px-3 mb-4 z-depth-3">
                        <div class="card-header py-4">
                          <h4 class="mb-4">Small business</h4>
                          <h1 class="display-4 text-primary text-center">$49</h1>
                          <span class="h6 text-muted">per month</span>
                        </div>
                        <div class="card-body">
                          <ul class="list-unstyled mb-4">
                            <li>Up to 15 users</li>
                            <li>Premium email support</li>
                            <li>Weekly updates</li>
                            <li>Free cancelation</li>
                          </ul>
                          <button type="button" class="btn btn-primary mb-3">Start free trial</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-pricing text-center px-3 mb-4"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header py-4"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"mb-4"</span><span class="nt">&gt;</span>Starter<span class="nt">&lt;/h4&gt;</span>
                <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4 text-primary text-center"</span><span class="nt">&gt;</span>$19<span class="nt">&lt;/h1&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"h6 text-muted"</span><span class="nt">&gt;</span>per month<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled mb-4"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Up to 5 users<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Basic support on Github<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Monthly updates<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Free cancelation<span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-3"</span><span class="nt">&gt;</span>Start free trial<span class="nt">&lt;/button&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-pricing popular text-center px-3 mb-4 z-depth-3"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header py-4"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"mb-4"</span><span class="nt">&gt;</span>Small business<span class="nt">&lt;/h4&gt;</span>
                <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4 text-primary text-center"</span><span class="nt">&gt;</span>$49<span class="nt">&lt;/h1&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"h6 text-muted"</span><span class="nt">&gt;</span>per month<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled mb-4"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Up to 15 users<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Premium email support<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Weekly updates<span class="nt">&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;</span>Free cancelation<span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-3"</span><span class="nt">&gt;</span>Start free trial<span class="nt">&lt;/button&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="icon-cards">Icon cards</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card bg-primary">
                        <div class="card-body py-5">
                          <div class="d-flex align-items-start">
                            <div class="icon icon-lg">
                              <i class="fab fa-twitter text-white"></i>
                            </div>
                            <div class="icon-text">
                              <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                              <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card bg-dark">
                        <div class="card-body py-5">
                          <div class="d-flex align-items-start">
                            <div class="icon icon-lg">
                              <i class="fab fa-twitter text-white"></i>
                            </div>
                            <div class="icon-text">
                              <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                              <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card bg-primary"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body py-5"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-start"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon icon-lg"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-twitter text-white"</span><span class="nt">&gt;&lt;/i&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon-text"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading text-white"</span><span class="nt">&gt;</span>Latest Bootstrap framework <span class="nt">&lt;small&gt;</span>(v4.0.0)<span class="nt">&lt;/small&gt;&lt;/h4&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-white"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.<span class="nt">&lt;/p&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card bg-dark"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body py-5"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-start"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon icon-lg"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-twitter text-white"</span><span class="nt">&gt;&lt;/i&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon-text"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"heading text-white"</span><span class="nt">&gt;</span>Latest Bootstrap framework <span class="nt">&lt;small&gt;</span>(v4.0.0)<span class="nt">&lt;/small&gt;&lt;/h4&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-white"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.<span class="nt">&lt;/p&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#example">Example</a></li>
                    <li class="toc-entry toc-h3"><a href="#metadata">Metadata</a></li>
                    <li class="toc-entry toc-h3"><a href="#actions">Actions</a></li>
                    <li class="toc-entry toc-h3"><a href="#commentable">Commentable</a></li>
                    <li class="toc-entry toc-h3"><a href="#list-groups">List groups</a></li>
                    <li class="toc-entry toc-h3"><a href="#card-with-overlay">Card with overlay</a></li>
                    <li class="toc-entry toc-h3"><a href="#colored-cards">Colored cards</a></li>
                    <li class="toc-entry toc-h3"><a href="#pricing-cards">Pricing cards</a></li>
                    <li class="toc-entry toc-h3"><a href="#icon-cards">Icon cards</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>